<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<style>
			.product-list .mui-table-view-cell {
				border-top: 0 none;
				border-bottom: 0 none;
				margin-bottom: 0;
			}
			
			.bonus {
				line-height: 42px;
				font-size: 2.2em;
				padding: 0 25px;
				color: #e83328;
			}
			
			.desc {
				color: #333;
				width: 100%;
				white-space: initial;
				font-size: 12px;
                border:none;
				padding-top: 8px;
				margin-top: 8px;
			}
			
			.mui-table-view-cell:after {
				height: 0;
			}
            .imgs { overflow: hidden;height:3.5rem; line-height: 3.5rem; border-bottom: 1px solid #ccc; font-size: 14px;}
            .imgs img{ float: left; width: 3.5rem; height:3.5rem;}
            .comment-box{ background: #fff;}
            .comment-box ul{ padding: 0;}
            #submit_btn{ border: 0 none;  background: rgba(255,80, 0 ,1); color: #fff; font-size: 14px; width: 90%; margin:10px auto; float:none; display: block;}
            
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">评价订单</h1>
		</header>

		<div class="mui-content mui-scroll-wrapper" id="pullrefresh">
			<div class="comment-box">
				<div class="imgs"><img src="http://img.umost.cn/product/KD000052_20160705_103834_163.jpg"/>美国HOODY'S胡迪斯盐焗腰果510g（有效期至10月23日）</div>
				<textarea class="desc" rows="6" placeholder="长度在10~500个字之间,写下购买体会可以为其他小伙伴提供参考~" maxlength="500"></textarea>
				<div class="comment-stars">
                    <span>商品描述</span>
                    <div class="stars-box">
                    <i class="mui-icon mui-icon mui-icon-star"></i>
                    <i class="mui-icon mui-icon mui-icon-star"></i>
                    <i class="mui-icon mui-icon mui-icon-star"></i>
                    <i class="mui-icon mui-icon mui-icon-star"></i>
                    <i class="mui-icon mui-icon mui-icon-star"></i>
                    </div>
                </div>
                <input type="hidden" id="star_num">
                
			</div>
            <button id="submit_btn">发表评价</button>
		</div>
		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->
		<script>
			var orderid = getQueryString('id');
			var page = 1;
			(function(mui, doc) {

				var getUserCommentData = function() {
					 $("#submit_btn").on("click", function () {
        var scoringGrades = $("#star_num").val();
        var experiences = $(".textareae").val();
        if (!scoringGrades) {
          stip('请先评分')
        } else if (!experiences||experiences.length<10) {
          stip('请填写心得!至少10字')
        } else {
          $.ajax({
            url: $("#submit_btn").attr("data-url"),
            type: "post",
            data: {
              orderId: $("#submit_c").attr("data-oid"), //订单Id
              orderItemId: $("#submit_c").attr("data-iid"), //订单子项表Id
              goodsId: $("#submit_c").attr("data-gid"), //商品Id
              scoringGrades: scoringGrades, //评分
              experiences: experiences, //心得
            },
            success: function (data_) {
              var data = JSON.parse(data_);
              if (data.success === true) {
                toggleClassName([{
                  ele: $("#submit_c"),
                  alert: "on",
                  setAlert: {
                    text: data.msg === "" ? "提交成功" : data.msg,
                    callback: function (e, t) {
                      setTimeout(function () {
                        window.location.href = $("#submit_c").attr("data-rtUrl");
                      }, t);
                    }
                  }
              }]);
              } else {
                toggleClassName([{
                  ele: $("#submit_c"),
                  alert: "on",
                  setAlert: {
                    text: data.msg
                  }
              }]);
							
              }
            }
          });
        }
      });
				};

				mui.ready(function() {
					getUserCommentData();
				});

			}(mui, document));
		</script>
	</body>

</html>